<template>
  <div class="ai-knowledge-chat">
    <div class="chat-header">
      <div class="assistant-info">
        <div class="assistant-avatar">
          <img src="@/assets/logo.png" alt="万象鉴真AI助手" class="avatar-logo">
        </div>
        <div class="assistant-details">
          <h2>AI安全助手</h2>
          <p>专业的反诈骗和信息安全助手，为您提供全方位的安全防护指导</p>
        </div>
      </div>
      <div class="chat-actions">
        <button class="action-btn" @click="clearChat" title="清空对话">
          <i class="fas fa-trash"></i>
        </button>
        <button class="action-btn" @click="exportChat" title="导出对话">
          <i class="fas fa-download"></i>
        </button>
      </div>
    </div>

    <div class="chat-container" ref="chatContainer">
      <!-- 欢迎消息 -->
      <div class="message-wrapper assistant-message" v-if="messages.length === 0">
        <div class="message-avatar">
          <img src="@/assets/logo.png" alt="万象鉴真AI助手" class="avatar-logo">
        </div>
        <div class="message-content">
          <div class="message-bubble">
            <p>🛡️ 您好！我是AI安全助手，专门为您提供反诈骗和信息安全相关的帮助。</p>
            <p>我可以为您解答关于：</p>
            <ul>
              <li>🔍 如何识别AI合成语音和Deepfake视频</li>
              <li>📱 电信诈骗防范和识别技巧</li>
              <li>🖼️ 图片篡改和虚假信息检测</li>
              <li>🎤 声纹识别和身份验证保护</li>
              <li>📝 AI生成文本的特征识别</li>
              <li>🚨 信息安全防护和应急处理</li>
            </ul>
            <p>遇到可疑信息？不确定内容真伪？随时向我咨询，让我帮您识别和防范各类欺诈风险！</p>
          </div>
          <div class="message-time">{{ formatTime(new Date()) }}</div>
        </div>
      </div>

      <!-- 对话消息列表 -->
      <div 
        v-for="(message, index) in messages" 
        :key="index"
        class="message-wrapper"
        :class="message.type + '-message'"
      >
        <div class="message-avatar" v-if="message.type === 'assistant'">
          <img src="@/assets/logo.png" alt="万象鉴真AI助手" class="avatar-logo">
        </div>
        <div class="message-content">
          <div class="message-bubble" :class="message.type">
            <div v-if="message.type === 'user'" class="user-message-text">
              {{ message.content }}
            </div>
            <div v-else class="assistant-message-text" v-html="formatAssistantMessage(message.content)">
            </div>
            <div v-if="message.typing" class="typing-indicator">
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
          <div class="message-time">{{ formatTime(message.timestamp) }}</div>
        </div>
        <div class="message-avatar" v-if="message.type === 'user'">
          <i class="fas fa-user"></i>
        </div>
      </div>

      <!-- 输入提示 -->
      <div v-if="isTyping" class="message-wrapper assistant-message">
        <div class="message-avatar">
          <img src="@/assets/logo.png" alt="万象鉴真AI助手" class="avatar-logo">
        </div>
        <div class="message-content">
          <div class="message-bubble assistant">
            <div class="typing-indicator">
              <span></span>
              <span></span>
              <span></span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 快速问题按钮 -->
    <div class="quick-questions" v-if="messages.length === 0">
      <h3>💡 常见问题</h3>
      <div class="question-grid">
        <button 
          v-for="question in quickQuestions" 
          :key="question.id"
          class="question-btn"
          @click="askQuickQuestion(question.text)"
        >
          <i :class="question.icon"></i>
          {{ question.text }}
        </button>
      </div>
    </div>

    <!-- 输入区域 -->
    <div class="chat-input-area">
      <div class="input-container">
        <div class="input-wrapper">
          <textarea
            v-model="userInput"
            @keydown="handleKeyDown"
            placeholder="请输入您想了解的问题..."
            class="chat-input"
            rows="1"
            :disabled="isTyping"
            ref="chatInput"
          ></textarea>
          <button 
            class="send-button"
            @click="sendMessage"
            :disabled="!userInput.trim() || isTyping"
          >
            <i class="fas fa-paper-plane"></i>
          </button>
        </div>
        <div class="input-footer">
          <div class="input-tips">
            <span class="tip">按 Enter 发送消息，Shift + Enter 换行</span>
          </div>
          <div class="input-stats">
            {{ userInput.length }}/2000
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick, onMounted } from 'vue'

// 响应式数据
const messages = ref([])
const userInput = ref('')
const isTyping = ref(false)
const chatContainer = ref(null)
const chatInput = ref(null)

// 快速问题
const quickQuestions = ref([
  {
    id: 1,
    icon: 'fas fa-microphone-alt',
    text: '如何识别AI合成语音？'
  },
  {
    id: 2,
    icon: 'fas fa-video',
    text: '什么是Deepfake视频？如何防范？'
  },
  {
    id: 3,
    icon: 'fas fa-shield-alt',
    text: '如何预防电信诈骗？'
  },
  {
    id: 4,
    icon: 'fas fa-file-alt',
    text: 'AI生成的文本有什么特征？'
  },
  {
    id: 5,
    icon: 'fas fa-user-shield',
    text: '声纹识别如何保护我们？'
  },
  {
    id: 6,
    icon: 'fas fa-image',
    text: '如何识别图片是否被篡改？'
  }
])

// 反诈骗和信息安全知识库
const antifraudResponses = {
  'AI合成语音': {
    content: `## 如何识别AI合成语音？

随着语音合成技术的发展，AI合成语音的质量越来越高，但仍然有一些特征可以帮助我们识别。

### 🎯 识别要点：

#### 1. **技术特征**
- **语调不自然**：AI语音往往缺乏自然的语调变化
- **停顿异常**：句子间的停顿可能过于规律或不自然
- **情感表达**：情感变化往往显得突兀或不连贯
- **发音特点**：某些音节或词语的发音可能略显僵硬

#### 2. **智盾清源检测功能**
- **声纹分析**：系统会分析语音的频谱特征
- **情感识别**：检测语音中的情感变化模式
- **语调分析**：分析语音的韵律和节奏特征
- **实时检测**：支持实时通话检测和录音分析

### 🚨 常见诈骗场景：

#### **电信诈骗**
- 骗子使用AI合成受害人亲友的声音
- 伪造紧急求助电话
- 模仿领导或权威人士声音

#### **金融诈骗**
- 冒充银行客服进行诈骗
- 虚假投资理财推销
- 贷款诈骗电话

### 🛡️ 防范措施：

1. **多重验证**：遇到涉及钱财的通话，务必通过其他方式核实
2. **留意细节**：注意语音中的不自然之处
3. **使用工具**：利用智盾清源的声纹识别功能验证身份
4. **保持警惕**：对突然的紧急求助保持理性判断

### 💡 使用建议：

- 在个人中心注册家人朋友的声纹特征
- 开启实时检测功能保护通话安全
- 定期查看检测历史，了解安全状况`
  },
  'Deepfake': {
    content: `## 什么是Deepfake？如何防范？

**Deepfake**是一种使用人工智能技术生成的虚假视频，可以让视频中的人说出从未说过的话或做出从未做过的动作。

### 🎭 技术原理：

#### **生成对抗网络(GAN)**
- **生成器**：创建虚假视频内容
- **判别器**：判断内容真伪
- **对抗训练**：两者相互竞争，提高生成质量

#### **人脸替换技术**
- 面部特征提取和重建
- 表情和动作迁移
- 光照和角度匹配

### 🔍 识别方法：

#### 1. **视觉特征**
- **眼部异常**：眨眼不自然或缺失
- **面部边界**：脸部边缘模糊或不连贯
- **光照不一致**：面部光照与环境不符
- **像素差异**：面部区域像素质量异常

#### 2. **行为特征**
- **微表情缺失**：缺乏细微的面部表情变化
- **头部运动**：头部动作可能不自然
- **唇语不符**：口型与语音不匹配

### 🛡️ 智盾清源检测技术：

#### **多模态分析**
- **图像分析**：使用ResNet50等模型检测图像异常
- **视频分析**：CNN+LSTM架构分析视频帧序列
- **音频分析**：检测语音与视频的同步性

#### **检测流程**
1. **上传视频**：支持多种格式的视频文件
2. **AI分析**：多层神经网络深度分析
3. **结果报告**：详细的检测报告和可信度评分
4. **特征标注**：标出可疑区域和异常特征

### 🚨 应用场景威胁：

#### **政治虚假信息**
- 伪造政治人物言论
- 制造虚假新闻事件
- 影响选举和政治决策

#### **金融诈骗**
- 冒充名人推荐投资
- 虚假企业宣传视频
- 身份盗用和欺诈

#### **社交媒体操纵**
- 网络霸凌和报复
- 虚假证据制造
- 个人名誉损害

### 💡 防范建议：

1. **提高警惕**：对网上视频内容保持批判性思维
2. **多源验证**：通过多个可信渠道验证信息
3. **使用工具**：利用智盾清源平台检测可疑视频
4. **关注细节**：注意视频中的不自然之处
5. **举报假信息**：发现虚假内容及时举报

### 🔧 使用智盾清源：

- 访问"AI生成内容识别"模块
- 上传待检测视频文件
- 查看详细分析报告
- 了解技术原理和识别方法`
  },
  '电信诈骗': {
    content: `## 如何预防电信诈骗？

电信诈骗是当前最常见的诈骗形式之一，了解常见手段和防范方法至关重要。

### 📱 常见诈骗类型：

#### 1. **冒充公检法**
- **手段**：冒充警察、法官、检察官
- **话术**：涉嫌洗钱、案件调查、资金冻结
- **目的**：骗取银行账户信息和资金

#### 2. **虚假客服**
- **手段**：冒充银行、支付宝、微信客服
- **话术**：账户异常、安全升级、退款退货
- **目的**：获取验证码、密码等敏感信息

#### 3. **网络购物诈骗**
- **手段**：虚假购物网站、假冒客服
- **话术**：商品质量问题、退货退款、支付失败
- **目的**：骗取钱财或个人信息

#### 4. **投资理财诈骗**
- **手段**：虚假投资平台、股票群、理财APP
- **话术**：高收益、内幕消息、专家指导
- **目的**：诱导投资，骗取资金

### 🚨 识别特征：

#### **通话特征**
- 主动来电询问个人信息
- 要求转账或提供密码
- 语气急促，制造紧张氛围
- 不允许核实或拒绝面谈

#### **技术特征**
- 使用网络电话或改号软件
- 可能使用AI合成语音
- 通话质量异常或有杂音
- 来电显示异常或陌生号码

### 🛡️ 智盾清源防护功能：

#### **诈骗风险评估**
- **实时分析**：分析通话内容和语音特征
- **风险评分**：对可疑通话进行风险等级评估
- **预警提醒**：及时发出诈骗风险警告

#### **声纹识别验证**
- **身份验证**：验证通话者真实身份
- **异常检测**：识别AI合成语音和变声
- **通话记录**：保存通话分析记录

#### **诈骗案例库**
- **实时更新**：收集最新诈骗案例和手段
- **智能匹配**：匹配相似诈骗模式
- **防范建议**：提供针对性防范措施

### 💡 防范原则：

#### **"六个一律"**
1. 陌生来电谈银行卡，一律挂掉
2. 陌生来电谈中奖了，一律挂掉
3. 陌生来电谈"电话转接公检法"，一律挂掉
4. 所有短信，让点击链接的，一律删掉
5. 微信不认识的人发来的链接，一律不点
6. 一提到"安全账户"，一律是诈骗

#### **"三不一多"**
- **不轻信**：不轻信来历不明的电话和信息
- **不透露**：不透露自己和家人的身份信息
- **不转账**：不向陌生人转账汇款
- **多核实**：多方核实信息真实性

### 🔧 使用建议：

1. **开启实时检测**：让系统自动分析来电安全性
2. **注册家人声纹**：建立可信联系人声纹库
3. **关注风险提醒**：及时查看安全预警信息
4. **学习案例分析**：了解最新诈骗手段
5. **举报可疑电话**：协助平台完善诈骗数据库

### 📞 紧急情况处理：

- 如已转账：立即联系银行冻结账户
- 如泄露信息：及时修改相关账户密码
- 如遭遇诈骗：立即报警并保存证据
- 利用智盾清源：分析可疑通话和信息`
  },
  'AI生成文本': {
    content: `## AI生成文本的特征识别

随着ChatGPT、Claude等大型语言模型的普及，AI生成文本越来越常见。了解其特征有助于识别虚假信息。

### 🤖 AI生成文本特征：

#### 1. **结构特征**
- **格式规整**：段落结构过于规整和对称
- **逻辑清晰**：逻辑链条完整但可能缺乏创意
- **重复模式**：某些句式或表达方式重复出现
- **长度一致**：段落长度过于均匀

#### 2. **语言特征**
- **词汇选择**：使用较为正式或书面的词汇
- **语法完美**：语法错误极少，表达过于完美
- **缺乏个性**：缺乏个人化的语言风格
- **套话较多**：使用较多通用性表达

#### 3. **内容特征**
- **信息密度高**：信息量大但可能缺乏深度
- **观点中性**：立场相对中立，避免极端观点
- **事实准确但可能过时**：基于训练数据的知识
- **缺乏时效性**：可能不了解最新信息

### 🔍 智盾清源检测技术：

#### **文本分析模型**
- **XLNet模型**：深度理解文本语义结构
- **BERT分析**：识别文本生成模式
- **特征提取**：分析文本的统计特征
- **风格分析**：识别写作风格和语言习惯

#### **检测流程**
1. **文本预处理**：清理和标准化文本
2. **特征提取**：提取语言学和统计特征
3. **模型分析**：使用多个模型综合判断
4. **结果输出**：生成详细的检测报告

### 🚨 应用场景威胁：

#### **虚假新闻**
- 大量生成虚假新闻内容
- 操纵舆论和公众认知
- 传播错误信息

#### **学术不端**
- 代写论文和作业
- 虚假研究报告
- 抄袭和剽窃

#### **网络诈骗**
- 生成虚假广告文案
- 制作诈骗邮件内容
- 虚假投资信息

#### **社交媒体操纵**
- 批量生成虚假评论
- 操纵网络舆情
- 制造虚假热点

### 💡 识别技巧：

#### **人工识别方法**
1. **检查时效性**：关注是否包含最新信息
2. **查看个性化**：是否有个人化的表达方式
3. **验证事实**：核实文中提到的具体事实
4. **分析逻辑**：判断逻辑是否过于完美
5. **查看情感**：注意情感表达是否自然

#### **技术辅助识别**
- 使用智盾清源文本检测功能
- 对比多个信息源
- 查看发布者历史记录
- 利用事实核查工具

### 🛡️ 防范建议：

#### **信息消费者**
1. **多源验证**：通过多个渠道验证信息
2. **批判性思维**：保持理性和批判性
3. **使用工具**：利用AI检测工具辅助判断
4. **关注来源**：注意信息的原始来源

#### **内容创作者**
1. **标注声明**：如使用AI辅助，应明确标注
2. **人工审核**：对AI生成内容进行人工核实
3. **保持原创**：避免完全依赖AI生成内容
4. **遵守规范**：遵循相关法律法规和平台规则

### 🔧 智盾清源使用指南：

1. **访问文本检测**：进入"AI生成内容识别"模块
2. **输入文本**：粘贴或输入待检测文本
3. **查看报告**：分析检测结果和可信度评分
4. **了解原理**：学习检测技术的工作原理
5. **持续学习**：关注最新的AI发展和识别技术`
  },
  '声纹识别': {
    content: `## 声纹识别如何保护我们？

声纹识别是一种重要的生物识别技术，在智盾清源平台中发挥着关键的身份验证和安全防护作用。

### 🎤 声纹识别原理：

#### **声纹的独特性**
- **生理特征**：声带长度、厚度、声道形状
- **发音习惯**：语速、语调、口音、方言
- **个人特色**：词汇选择、语法习惯、情感表达

#### **技术实现**
- **特征提取**：提取MFCC、基频等声学特征
- **模式匹配**：与已注册声纹进行比对
- **深度学习**：使用神经网络提高识别精度
- **实时分析**：支持实时通话监测

### 🛡️ 安全防护功能：

#### 1. **身份验证**
- **本人确认**：验证通话者是否为本人
- **家人识别**：识别家庭成员的声音
- **可信联系人**：建立可信联系人声纹库
- **异常警报**：发现非本人通话时及时警报

#### 2. **诈骗防范**
- **AI语音检测**：识别AI合成的虚假语音
- **变声器检测**：识别使用变声器的异常语音
- **情绪分析**：分析通话中的紧张、恐惧等情绪
- **威胁识别**：识别语音中的威胁和恐吓内容

#### 3. **通话安全**
- **实时监控**：实时分析通话安全性
- **风险评估**：对可疑通话进行风险评分
- **自动记录**：保存重要通话的分析记录
- **应急响应**：高风险情况下的应急处理

### 🔒 隐私保护措施：

#### **数据安全**
- **本地存储**：声纹数据优先本地存储
- **加密传输**：数据传输全程加密
- **访问控制**：严格的权限管理
- **定期清理**：定期清理过期数据

#### **用户控制**
- **授权使用**：用户完全控制声纹数据使用
- **随时删除**：可随时删除已注册的声纹
- **隐私设置**：灵活的隐私保护设置
- **透明度**：明确告知数据使用情况

### 🚨 应用场景：

#### **家庭安全**
- **老人保护**：保护老人免受电信诈骗
- **儿童安全**：监控儿童通话安全
- **紧急求助**：验证紧急求助电话真实性

#### **商业应用**
- **客服验证**：验证客服人员身份
- **会议安全**：确保重要会议参与者身份
- **金融交易**：语音转账和交易验证

#### **法律取证**
- **证据收集**：收集通话诈骗证据
- **身份确认**：确认录音中的说话人
- **法庭支持**：为法律程序提供技术支持

### 💡 使用建议：

#### **个人用户**
1. **注册声纹**：在个人中心注册自己和家人的声纹
2. **定期更新**：定期更新声纹数据保持准确性
3. **开启监控**：开启实时通话监控功能
4. **关注警报**：及时查看安全警报和风险提醒

#### **设置建议**
- **敏感度调节**：根据需要调整检测敏感度
- **白名单管理**：设置可信联系人白名单
- **自动响应**：设置自动响应规则
- **备份恢复**：定期备份声纹数据

### 🔧 智盾清源声纹功能：

#### **声纹管理**
- 进入"声纹识别系统"模块
- 点击"声纹注册管理"
- 按照提示录制声纹样本
- 完成注册并设置安全选项

#### **实时检测**
- 开启实时通话监控
- 系统自动分析来电安全性
- 查看检测结果和风险评分
- 根据提示采取相应措施

#### **历史分析**
- 查看通话历史和分析记录
- 了解通话安全趋势
- 分析可疑通话模式
- 生成安全报告

### 🎯 效果评估：

- **准确率**：超过95%的身份识别准确率
- **响应速度**：毫秒级实时检测
- **适应性**：适应不同环境和设备
- **可靠性**：7×24小时稳定运行

通过声纹识别技术，智盾清源为用户提供了一道强有力的安全防护屏障，有效防范语音诈骗和身份冒充等威胁。`
  },
  '图片篡改': {
    content: `## 如何识别图片是否被篡改？

在数字时代，图片篡改技术日益复杂，学会识别被篡改的图片对信息安全至关重要。

### 🖼️ 常见篡改类型：

#### 1. **拼接合成**
- **多图拼接**：将多张图片的不同部分合成一张
- **背景替换**：更换图片背景
- **物体移植**：将一张图片中的物体移植到另一张

#### 2. **内容修改**
- **局部删除**：删除图片中的特定内容
- **内容添加**：在图片中添加原本不存在的内容
- **颜色修改**：改变图片的颜色或亮度

#### 3. **AI生成**
- **GAN生成**：使用生成对抗网络创建虚假图片
- **人脸替换**：将一个人的脸替换到另一个人身上
- **风格迁移**：改变图片的艺术风格

### 🔍 识别技巧：

#### **肉眼识别方法**
1. **光照一致性**：检查图片中各部分的光照是否一致
2. **阴影合理性**：观察阴影的方向和强度是否合理
3. **边缘连接**：查看物体边缘是否自然连接
4. **像素质量**：注意不同区域的像素质量差异
5. **透视关系**：检查物体的透视关系是否正确

#### **技术细节识别**
- **压缩痕迹**：不同区域的压缩比例可能不同
- **噪声分布**：图片噪声分布的不均匀性
- **色彩空间**：颜色空间的不一致性
- **频域分析**：频域中的异常特征

### 🔬 智盾清源检测技术：

#### **图像分析算法**
- **ResNet50模型**：深度学习图像分析
- **EfficientNet**：高效的图像识别网络
- **多尺度分析**：从不同尺度分析图片
- **特征融合**：综合多种特征进行判断

#### **检测流程**
1. **图像预处理**：标准化和增强图像质量
2. **特征提取**：提取图像的深层特征
3. **异常检测**：识别篡改区域和异常特征
4. **结果分析**：生成详细的分析报告

#### **检测指标**
- **篡改概率**：图片被篡改的可能性评分
- **可疑区域**：标出可能被篡改的区域
- **篡改类型**：识别可能的篡改方式
- **置信度**：检测结果的可信度

### 🚨 应用威胁：

#### **新闻造假**
- 虚假新闻图片
- 历史事件篡改
- 政治人物合成图片

#### **社交媒体**
- 虚假生活照片
- 产品宣传欺诈
- 网络谣言传播

#### **法律证据**
- 伪造证据图片
- 监控录像篡改
- 身份证明造假

#### **商业欺诈**
- 产品图片造假
- 虚假广告图片
- 房产照片欺诈

### 💡 防范建议：

#### **信息验证**
1. **多源核实**：通过多个渠道验证图片真实性
2. **反向搜索**：使用图片反向搜索找到原图
3. **时间线检查**：核实图片的拍摄时间和事件时间
4. **技术检测**：使用专业工具进行技术检测

#### **日常防护**
- 对网络图片保持警惕
- 不轻易相信震撼性图片
- 学会使用图片验证工具
- 关注官方信息源

### 🔧 智盾清源使用指南：

#### **图片检测步骤**
1. **访问检测模块**：进入"谣言检测系统"或"AI生成内容识别"
2. **上传图片**：选择待检测的图片文件
3. **开始分析**：点击开始检测按钮
4. **查看结果**：查看详细的检测报告

#### **结果解读**
- **绿色区域**：未发现篡改迹象
- **黄色区域**：可能存在轻微修改
- **红色区域**：高度可疑的篡改区域
- **详细报告**：技术分析和建议

#### **高级功能**
- **批量检测**：同时检测多张图片
- **历史记录**：查看检测历史
- **专家模式**：详细的技术参数
- **报告导出**：导出检测报告

### 📊 技术优势：

#### **检测能力**
- **高准确率**：超过90%的检测准确率
- **多类型支持**：支持各种篡改类型检测
- **实时处理**：快速检测和反馈
- **持续更新**：算法持续优化升级

#### **用户体验**
- **简单易用**：直观的操作界面
- **快速响应**：秒级检测速度
- **详细报告**：清晰的分析结果
- **专业支持**：技术专家支持

### 🎯 应用场景：

- **新闻编辑**：验证新闻图片真实性
- **法律工作**：验证证据图片
- **社交媒体**：识别虚假图片
- **电商平台**：检测商品图片真实性
- **教育机构**：防范学术造假

通过智盾清源的图片篡改检测功能，用户可以有效识别虚假图片，保护自己免受图片欺诈的影响。`
  }
}

// 发送消息
const sendMessage = async () => {
  if (!userInput.value.trim() || isTyping.value) return

  const userMessage = {
    type: 'user',
    content: userInput.value.trim(),
    timestamp: new Date()
  }

  messages.value.push(userMessage)
  const question = userInput.value.trim()
  userInput.value = ''
  
  // 自动调整输入框高度
  nextTick(() => {
    chatInput.value.style.height = 'auto'
    scrollToBottom()
  })

  // 显示打字指示器
  isTyping.value = true
  
  // 模拟AI回复延迟
  setTimeout(() => {
    const response = generateAIResponse(question)
    messages.value.push({
      type: 'assistant',
      content: response,
      timestamp: new Date()
    })
    isTyping.value = false
    nextTick(() => {
      scrollToBottom()
    })
  }, 1000 + Math.random() * 2000)
}

// 生成AI回复
const generateAIResponse = (question) => {
  const lowerQuestion = question.toLowerCase()
  
  // 匹配关键词
  for (const [key, response] of Object.entries(antifraudResponses)) {
    if (lowerQuestion.includes(key.toLowerCase()) || 
        lowerQuestion.includes(key.replace(/AI|ai/, '').toLowerCase())) {
      return response.content
    }
  }
  
  // 额外关键词匹配
  if (lowerQuestion.includes('语音') || lowerQuestion.includes('声音') || lowerQuestion.includes('合成')) {
    return antifraudResponses['AI合成语音'].content
  }
  
  if (lowerQuestion.includes('视频') || lowerQuestion.includes('deepfake') || lowerQuestion.includes('换脸')) {
    return antifraudResponses['Deepfake'].content
  }
  
  if (lowerQuestion.includes('诈骗') || lowerQuestion.includes('电信') || lowerQuestion.includes('骗子')) {
    return antifraudResponses['电信诈骗'].content
  }
  
  if (lowerQuestion.includes('文本') || lowerQuestion.includes('文章') || lowerQuestion.includes('chatgpt')) {
    return antifraudResponses['AI生成文本'].content
  }
  
  if (lowerQuestion.includes('声纹') || lowerQuestion.includes('身份') || lowerQuestion.includes('验证')) {
    return antifraudResponses['声纹识别'].content
  }
  
  if (lowerQuestion.includes('图片') || lowerQuestion.includes('图像') || lowerQuestion.includes('篡改') || lowerQuestion.includes('ps')) {
    return antifraudResponses['图片篡改'].content
  }
  
  // 默认回复
  return `## 关于您的问题\n\n感谢您的咨询！我是智盾清源的AI安全助手，专门为您提供反诈骗和信息安全相关的帮助。\n\n虽然我暂时还没有针对这个具体问题的详细解答，但我可以为您提供以下建议：\n\n### 🔍 相关功能推荐：\n\n1. **谣言检测**：检测文本和图片的真实性\n2. **AI生成内容识别**：识别AI生成的图像、视频、文本、音频\n`;
}

// 快速提问
const askQuickQuestion = (question) => {
  userInput.value = question
  sendMessage()
}

// 处理键盘事件
const handleKeyDown = (event) => {
  if (event.key === 'Enter' && !event.shiftKey) {
    event.preventDefault()
    sendMessage()
  }
  
  // 自动调整输入框高度
  nextTick(() => {
    const textarea = event.target
    textarea.style.height = 'auto'
    textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px'
  })
}

// 清空对话
const clearChat = () => {
  if (confirm('确定要清空所有对话记录吗？')) {
    messages.value = []
  }
}

// 导出对话
const exportChat = () => {
  const chatContent = messages.value.map(msg => 
    `${msg.type === 'user' ? '用户' : 'AI助手'} [${formatTime(msg.timestamp)}]: ${msg.content}`
  ).join('\n\n')
  
  const blob = new Blob([chatContent], { type: 'text/plain' })
  const url = URL.createObjectURL(blob)
  const a = document.createElement('a')
  a.href = url
  a.download = `AI助手对话记录_${new Date().toLocaleDateString()}.txt`
  a.click()
  URL.revokeObjectURL(url)
}

// 滚动到底部
const scrollToBottom = () => {
  nextTick(() => {
    if (chatContainer.value) {
      chatContainer.value.scrollTop = chatContainer.value.scrollHeight
    }
  })
}

// 格式化时间
const formatTime = (date) => {
  return date.toLocaleTimeString('zh-CN', { 
    hour: '2-digit', 
    minute: '2-digit' 
  })
}

// 格式化AI消息（支持Markdown）
const formatAssistantMessage = (content) => {
  return content
    .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
    .replace(/\*(.*?)\*/g, '<em>$1</em>')
    .replace(/##\s(.*?)$/gm, '<h3>$1</h3>')
    .replace(/###\s(.*?)$/gm, '<h4>$1</h4>')
    .replace(/^-\s(.*?)$/gm, '<li>$1</li>')
    .replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>')
    .replace(/\n/g, '<br>')
}

// 组件挂载时聚焦输入框
onMounted(() => {
  if (chatInput.value) {
    chatInput.value.focus()
  }
})
</script>

<style scoped>
.ai-knowledge-chat {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f5f7fa;
  padding: 20px;
  box-sizing: border-box;
  max-width: 1600px;
  margin: 0 auto;
}

/* 响应式设计 */
@media (max-width: 1600px) {
  .ai-knowledge-chat {
    width: 90%;
  }
}

@media (max-width: 1200px) {
  .ai-knowledge-chat {
    width: 95%;
  }
}

@media (max-width: 768px) {
  .ai-knowledge-chat {
    width: 100%;
    padding: 10px;
  }
}

.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  border-radius: 12px;
  padding: 20px 25px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border: 1px solid #e6e9ef;
}

.assistant-info {
  display: flex;
  align-items: center;
}

.assistant-avatar {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-right: 20px;
  box-shadow: 0 4px 15px rgba(30, 60, 114, 0.3);
}

.assistant-avatar .avatar-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 50%;
}

.assistant-details h2 {
  color: #1e3c72;
  margin-bottom: 5px;
  font-size: 24px;
  font-weight: 600;
}

.assistant-details p {
  color: #666;
  font-size: 15px;
  margin: 0;
}

.chat-actions {
  display: flex;
  gap: 12px;
}

.action-btn {
  background: #f8f9fa;
  color: #495057;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.action-btn:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}

.chat-container {
  flex: 1;
  overflow-y: auto;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: transparent;
}

.chat-container::-webkit-scrollbar {
  width: 6px;
}

.chat-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.chat-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px;
}

.chat-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.message-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 15px;
}

.message-wrapper.user-message {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.message-wrapper.assistant-message .message-avatar {
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  color: white;
}

.message-wrapper.user-message .message-avatar {
  background: linear-gradient(135deg, #007bff, #0056b3);
  color: white;
}

.message-avatar .avatar-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 50%;
}

.message-content {
  display: flex;
  flex-direction: column;
  max-width: 75%;
}

.message-wrapper.user-message .message-content {
  align-items: flex-end;
}

.message-bubble {
  position: relative;
  padding: 16px 20px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.6;
  word-break: break-word;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border: 1px solid transparent;
}

.message-bubble.user {
  background: linear-gradient(135deg, #dcf8c6, #b3e5a4);
  color: #2d5016;
  border-radius: 18px 18px 4px 18px;
}

.message-bubble.assistant {
  background: white;
  color: #333;
  border: 1px solid #e6e9ef;
  border-radius: 18px 18px 18px 4px;
}

.user-message-text {
  color: #2d5016;
  font-weight: 500;
}

.assistant-message-text {
  color: #333;
}

.message-bubble strong {
  font-weight: 600;
  color: #1e3c72;
}

.message-bubble em {
  font-style: italic;
  color: #666;
}

.message-bubble h3 {
  color: #1e3c72;
  margin: 15px 0 10px 0;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 2px solid #e6e9ef;
  padding-bottom: 5px;
}

.message-bubble h4 {
  color: #1e3c72;
  margin: 12px 0 8px 0;
  font-size: 16px;
  font-weight: 600;
}

.message-bubble ul {
  padding-left: 20px;
  margin: 10px 0;
}

.message-bubble li {
  margin-bottom: 6px;
  color: #555;
}

.message-bubble li::marker {
  color: #1e3c72;
}

.message-time {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
  padding: 0 5px;
}

.message-wrapper.user-message .message-time {
  text-align: right;
}

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #666;
  font-size: 12px;
  margin-top: 5px;
}

.typing-indicator span {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #1e3c72;
  border-radius: 50%;
  animation: typing-animation 1.4s infinite ease-in-out;
}

.typing-indicator span:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-indicator span:nth-child(2) {
  animation-delay: -0.16s;
}

.typing-indicator span:nth-child(3) {
  animation-delay: 0s;
}

@keyframes typing-animation {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.5;
  }
  40% {
    transform: translateY(-6px);
    opacity: 1;
  }
}

.quick-questions {
  background: white;
  border-radius: 12px;
  padding: 25px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  border: 1px solid #e6e9ef;
}

.quick-questions h3 {
  color: #1e3c72;
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.question-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

.question-btn {
  background: #f8f9fa;
  color: #495057;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  padding: 15px 20px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
}

.question-btn:hover {
  background: #e9ecef;
  border-color: #1e3c72;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30, 60, 114, 0.15);
}

.question-btn i {
  font-size: 20px;
  color: #1e3c72;
}

.chat-input-area {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  border: 1px solid #e6e9ef;
}

.input-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.chat-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  resize: none;
  font-size: 15px;
  line-height: 1.5;
  font-family: inherit;
  box-sizing: border-box;
  transition: all 0.2s ease;
  min-height: 44px;
  max-height: 120px;
}

.chat-input:focus {
  outline: none;
  border-color: #1e3c72;
  box-shadow: 0 0 0 3px rgba(30, 60, 114, 0.1);
}

.chat-input::placeholder {
  color: #adb5bd;
}

.send-button {
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  color: white;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(30, 60, 114, 0.3);
}

.send-button:hover:not(:disabled) {
  background: linear-gradient(135deg, #2a5298, #1e3c72);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(30, 60, 114, 0.4);
}

.send-button:disabled {
  background: #dee2e6;
  cursor: not-allowed;
  color: #adb5bd;
  transform: none;
  box-shadow: none;
}

.input-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e9ecef;
  color: #6c757d;
  font-size: 12px;
}

.input-tips {
  flex: 1;
  text-align: left;
}

.tip {
  color: #6c757d;
}

.input-stats {
  text-align: right;
  flex-shrink: 0;
  color: #adb5bd;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .chat-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
  }

  .assistant-info {
    width: 100%;
  }

  .assistant-avatar {
    width: 50px;
    height: 50px;
    font-size: 24px;
    margin-right: 15px;
  }

  .assistant-avatar .avatar-logo {
    width: 40px;
    height: 40px;
  }

  .message-avatar .avatar-logo {
    width: 30px;
    height: 30px;
  }

  .assistant-details h2 {
    font-size: 20px;
  }

  .chat-actions {
    width: 100%;
    justify-content: space-around;
  }

  .action-btn {
    flex: 1;
    justify-content: center;
  }

  .message-content {
    max-width: 85%;
  }

  .message-bubble {
    padding: 12px 16px;
    font-size: 14px;
  }

  .quick-questions {
    padding: 20px;
  }

  .question-grid {
    grid-template-columns: 1fr;
  }

  .question-btn {
    padding: 12px 16px;
    font-size: 13px;
  }

  .chat-input-area {
    padding: 15px;
  }

  .input-wrapper {
    flex-direction: column;
    gap: 12px;
  }

  .send-button {
    width: 100%;
    border-radius: 10px;
    height: 44px;
  }

  .input-footer {
    flex-direction: column;
    gap: 5px;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .ai-knowledge-chat {
    padding: 5px;
  }

  .chat-header {
    padding: 15px;
  }

  .assistant-details h2 {
    font-size: 18px;
  }

  .message-bubble {
    padding: 10px 14px;
    font-size: 13px;
  }

  .quick-questions {
    padding: 15px;
  }

  .question-btn {
    padding: 10px 14px;
    font-size: 12px;
  }

  .chat-input {
    font-size: 14px;
    padding: 10px 14px;
  }
}
</style> 